// 剪裁效果
var $image = $('#image')
  
// 1.2 配置选项
const options = {
  // 纵横比
  aspectRatio: 1,
  // 指定预览区域
  preview: '.img-preview'
}

// 1.3 创建裁剪区域
$image.cropper(options);

// 点击上传
$('button:contains("上传")').on('click',function(){
    $('#file').trigger('click')
})

$('#file').on('change', function () {
    let fileObj = this.files[0];
    let url = URL.createObjectURL(fileObj);
    $image.cropper('destroy').attr('src', url).cropper(options);
});


// 确定修改
$('button:contains("确定")').on('click', function () {
    // 1. 完成剪裁，得到canvas图片
    let canvas = $image.cropper('getCroppedCanvas', {
        width: 100,
        height: 100
    });
    // 2. 把图片转成字符串形式
    let str = canvas.toDataURL('image/png');
    // console.log(str);
    // 3. ajax提交字符串即可
    $.ajax({
        type: 'POST',
        url: '/my/update/avatar',
        data: {
            avatar: str
        },
        success: function (res) {
            layer.msg(res.message);
            if (res.status === 0) {
                // 调用父页面的函数，重新渲染头像
                window.parent.show();
            }
        }
    });
})